<script setup lang="ts">
import {reactive, ref, watch, computed, defineProps, defineEmits} from "vue";
import type {GridMaterialType} from "@/data-type/material.type";
import {CommonUtils} from "great-jsutils";

const defaultProps = {
  type: 'grid',
  props: {
    row: {editColumnIndex: 0}
  },
  children: [
    {
      span: 12,
      children: [
        {
          id: CommonUtils.uuid(),
          children: [
          ]
        }
      ]
    }
  ]
}
const props = defineProps<{material:GridMaterialType}>();
const row = computed(() => {
  return props.material?.props?.row || defaultProps?.props?.row;
});
const col = computed(() => {
  const row = props.material?.props?.row || defaultProps?.props?.row;
  const cols = props.material?.children || defaultProps?.children;
  return cols[row.editColumnIndex];
});
const colsOptions = computed(() => {
  const cols = props.material?.children || defaultProps?.children;
  const items = [];
  for(let i = 0; i < cols.length; i++){
    items.push({
      value: i,
      label: `第${i+1}列`
    })
  }
  return items;
});
const emit = defineEmits<{(event: 'change', material: GridMaterialType):void}>();
const activeKey = ref('1');
let formState = reactive<GridMaterialType>(props.material);

watch(props, (newValue, oldValue)=>{
  formState = newValue.material;
});
const deleteCol = ()=>{
  if(!isNaN(row.value.editColumnIndex)){
    const cols = props.material?.children || defaultProps?.children;
    cols?.splice(row.value.editColumnIndex, 1)
  }
}
const addCol = ()=>{
  const cols = props.material?.children || defaultProps?.children;
  if(cols){
    cols.push({span: 6});
  }
}
</script>

<template>
  <a-tabs v-model:activeKey="activeKey" style="background:#fff;padding: 4px 8px;">
    <a-tab-pane key="1" tab="属性">
      <a-form
          :model="formState"
      >
        <div><a-divider>第{{row.editColumnIndex+1}}列</a-divider></div>
        <a-form-item
            label="索引"
            name="componentType"
        >
          <a-select v-model:value="row.editColumnIndex">
            <a-select-option v-for="item in colsOptions" :value="item.value">{{ item.label }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
            label="格数"
            name="text"
        >
          <a-input-number v-model:value="col.span"  style="width: 100%" max="24" min="1"></a-input-number>
        </a-form-item>
        <a-button type="dashed" block @click.stop="addCol()"><plus-outlined />添加列</a-button>
        <p></p>
        <a-button type="dashed" block @click.stop="deleteCol()"><DeleteOutlined />删除列</a-button>
      </a-form>
    </a-tab-pane>
    <a-tab-pane key="2" tab="样式" force-render>样式</a-tab-pane>
    <a-tab-pane key="3" tab="事件">事件</a-tab-pane>
  </a-tabs>
</template>

<style scoped>

</style>
